import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Image, Modal, Popconfirm, Switch, Tag, message } from 'antd';
import { useRef, useState } from 'react';
import { Access, useAccess } from 'umi';
import { delteUser, editUserApi, getUsers } from '../../services/user';
// import { useNavigator } from "umi"
import { formatTime } from '@/utils/formatTime';
import { history } from 'umi';
export default function UserList() {
  // const navigate = useNavigator()
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [userInfo, setUserInfo] = useState({});
  const tableRef = useRef();
  const access = useAccess();
  // console.log(access);
  function handleStatusChange(tar, row) {
    console.log(tar, row);
    const id = row._id;
    editUserApi(id, { enabled: tar });
    message.success('状态修改成功');
  }
  function editUser(tar) {
    //要编辑的对象
    // 跳转编辑页面
    // console.log(tar)
    history.push('/user/editUser', { id: tar._id });

    // )
  }
  function confirm(tar) {
    delteUser(tar._id).then((res) => {
      ///请求重新渲染数据
      tableRef.current.reload();
      message.success('删除成功');
    });
  }
  function handleUserDetail(info) {
    setIsModalOpen(true);
    setUserInfo(info);
  }
  function handleCancel() {
    setIsModalOpen(false);
  }
  const columns = [
    {
      align: 'center',
      key: 'number',
      title: '序号',
      search: false,

      render: (_, rows, index) => {
        // 计算序号
        const target = pageSize * (current - 1) + index + 1;
        return <div>{target}</div>;
      },
    },
    {
      align: 'center',
      title: '登录账号',
      dataIndex: 'loginId',
      key: 'loginId',
    },
    {
      align: 'center',
      title: '登陆密码',
      dataIndex: 'loginPwd',
      key: 'loginPwd',
      search: false,
    },
    {
      align: 'center',
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      align: 'center',
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
      valueType: 'avatar',
      search: false,
    },
    {
      align: 'center',
      title: '帐号状态',
      dataIndex: 'enabled',
      key: 'enabled',
      render: (_, rows) => {
        const defaultChecked = rows.enabled;
        return (
          <Switch
            size="small"
            defaultChecked={defaultChecked}
            onChange={(tar) => {
              handleStatusChange(tar, rows);
            }}
          ></Switch>
        );
      },
    },
    {
      title: '操作',
      key: 'options',
      align: 'center',
      search: false,
      render: (_, rows) => {
        return (
          <>
            <Button
              type="link"
              size="small"
              onClick={() => {
                handleUserDetail(rows);
              }}
            >
              详情
            </Button>
            <Button
              type="link"
              size="small"
              onClick={() => {
                editUser(rows);
              }}
            >
              编辑
            </Button>
            <Access accessible={access.superAdmin}>
              <Popconfirm
                title="删除用户"
                description="确定删除当前用户"
                okText="确定"
                cancelText="取消"
                onConfirm={() => {
                  confirm(rows);
                }}
              >
                <Button type="link" size="small">
                  删除
                </Button>
              </Popconfirm>
            </Access>
          </>
        );
      },
    },
  ];

  function handlePageChange(current, pageSize) {
    console.log(current, pageSize, '运行了');
    setCurrent(current);
    // setPageSize(pageSize)
  }
  return (
    <PageContainer
      header={{
        breadcrumb: {
          items: [
            {
              title: '用户',
            },
            {
              title: '用户列表',
            },
          ],
        },
      }}
    >
      <ProTable
        actionRef={tableRef}
        pagination={{
          defaultPageSize: 5,
          onChange: (current, pageSize) => handlePageChange(current, pageSize),
        }}
        request={async (params) => {
          // console.log(params)
          params.current = current;
          params.pageSize = pageSize;
          const resp = await getUsers(params);
          console.log('数据', resp);
          // console.log("页数",params)

          return {
            data: resp.data.data,
            success: true,
            total: resp.data.count,
          };
        }}
        columns={columns}
        rowKey={(row) => row._id}
      ></ProTable>
      <Modal
        title={userInfo?.nickname}
        open={isModalOpen}
        style={{ top: 20 }}
        footer={false}
        onCancel={handleCancel}
      >
        <h3>登录账号</h3>
        <p>
          <Tag color="red">{userInfo?.loginId}</Tag>
        </p>
        <h3>登录密码</h3>
        <p>
          <Tag color="magenta">{userInfo?.loginPwd}</Tag>
        </p>
        <h3>当前头像</h3>
        <Image src={userInfo?.avatar} width={60} />

        <h3>联系方式</h3>
        <div
          style={{
            display: 'flex',
            width: '350px',
            justifyContent: 'space-between',
          }}
        >
          <div>
            <h4>QQ</h4>
            <p>{userInfo?.qq ? userInfo.qq : '未填写'}</p>
          </div>
          <div>
            <h4>微信</h4>
            <p>{userInfo?.wechat ? userInfo.weichat : '未填写'}</p>
          </div>
          <div>
            <h4>邮箱</h4>
            <p>{userInfo?.mail ? userInfo.mail : '未填写'}</p>
          </div>
        </div>
        <h3>个人简介</h3>
        <p>{userInfo?.intro ? userInfo.intro : '未填写'}</p>
        <h3>时间信息</h3>
        <div
          style={{
            display: 'flex',
            width: '450px',
            justifyContent: 'space-between',
          }}
        >
          <div>
            <h4>注册时间</h4>
            <p>{formatTime(userInfo?.registerDate, true)}</p>
          </div>
          <div>
            <h4>上次登录</h4>
            <p>{formatTime(userInfo?.lastLoginDate, true)}</p>
          </div>
        </div>
        <h3>当前积分</h3>
        <p>{userInfo?.points} 分</p>
      </Modal>
    </PageContainer>
  );
}
